import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:xmshop/app/services/screenAdapter.dart';

import '../controllers/product_content_controller.dart';

class ProductContentView extends GetView<ProductContentController> {
  const ProductContentView({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar:
          true, //实现透明导航：三个部分：extendBodyBehindAppBar true; backgroundColor  elevation
      appBar: PreferredSize(
        //preferredSize: ScreenAdapter.height(96),
        preferredSize: Size.fromHeight(ScreenAdapter.height(120)),
        child: Obx(() => AppBar(
              title: Container(
                width: ScreenAdapter.width(400),
                height: ScreenAdapter.height(90),
                child: controller.showTabs.value
                    ? Row(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: controller.tabsList
                            .map((item) => InkWell(
                                  onTap: () {
                                    controller
                                        .changeSelectedTabsindex(item['id']);
                                    //跳转到指定的容器
                                    if (item['id'] == 1) {
                                      Scrollable.ensureVisible(
                                          controller.gk1.currentContext
                                              as BuildContext,
                                          duration:
                                              Duration(milliseconds: 100));
                                    } else if (item['id'] == 2) {
                                      Scrollable.ensureVisible(
                                          controller.gk2.currentContext
                                              as BuildContext,
                                          duration: Duration(
                                              milliseconds:
                                                  100)); //Duration 配置过度时间
                                    } else if (item['id'] == 3) {
                                      Scrollable.ensureVisible(
                                          controller.gk3.currentContext
                                              as BuildContext,
                                          duration:
                                              Duration(milliseconds: 100));
                                    }
                                  },
                                  //padding: EdgeInsets.all(0),
                                  child: Column(
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    children: [
                                      Text(
                                        "${item['title']}",
                                        // "商品",
                                        style: TextStyle(
                                            fontSize:
                                                ScreenAdapter.fontSize(36)),
                                      ),
                                      item['id'] ==
                                              controller.selectedTabsindex.value
                                          ? Container(
                                              margin: EdgeInsets.only(
                                                  top:
                                                      ScreenAdapter.height(10)),
                                              width: ScreenAdapter.width(100),
                                              height: ScreenAdapter.height(3),
                                              color: Colors.red)
                                          : Container(
                                              margin: EdgeInsets.only(
                                                  top:
                                                      ScreenAdapter.height(10)),
                                              width: ScreenAdapter.width(100),
                                              height: ScreenAdapter.height(3),
                                            )
                                    ],
                                  ),
                                ))
                            .toList(),
                      )
                    : Text(""),
              ),
              elevation:
                  0.0, //elevation 常常用于表示一个组件的物理属性，如卡片、按钮或对话框。通过调整 elevation，你可以使某些组件看起来更突出或更靠近用户，而其他的则相对较远或更不突出。
              centerTitle: true, //是否显示在中间
              //backgroundColor: Colors.white.withOpacity(0.5), //透明度
              backgroundColor:
                  Colors.white.withOpacity(controller.opcity.value), //透明度
              actions: [
                Container(
                  height: ScreenAdapter.height(88),
                  width: ScreenAdapter.width(88),
                  margin: EdgeInsets.only(right: ScreenAdapter.width(25)),
                  child: ElevatedButton(
                    onPressed: () {},
                    style: ButtonStyle(
                        //注意：去掉 button 默认的padding
                        padding: MaterialStateProperty.all(EdgeInsets.all(0)),
                        alignment: Alignment.center,
                        backgroundColor:
                            MaterialStateProperty.all(Colors.black12),
                        foregroundColor:
                            MaterialStateProperty.all(Colors.white),
                        shape: MaterialStateProperty.all(const CircleBorder())),
                    child: Icon(Icons.file_upload_outlined),
                  ),
                ),
                Container(
                  height: ScreenAdapter.height(88),
                  width: ScreenAdapter.width(88),
                  margin: EdgeInsets.only(right: ScreenAdapter.width(25)),
                  child: ElevatedButton(
                    onPressed: () {},
                    style: ButtonStyle(
                        padding: MaterialStateProperty.all(EdgeInsets.all(0)),
                        alignment: Alignment.center,
                        backgroundColor:
                            MaterialStateProperty.all(Colors.black12),
                        foregroundColor:
                            MaterialStateProperty.all(Colors.white),
                        shape: MaterialStateProperty.all(const CircleBorder())),
                    child: Icon(Icons.more_horiz_rounded),
                  ),
                )
              ],
              leading: Container(
                // color: Colors.red,
                alignment: Alignment.center,
                child: Container(
                  height: ScreenAdapter.height(88),
                  width: ScreenAdapter.width(88),
                  //margin: EdgeInsets.only(right: ScreenAdapter.width(25)),
                  child: ElevatedButton(
                    onPressed: () {},
                    style: ButtonStyle(
                        //注意：去掉 button 默认的padding
                        padding: MaterialStateProperty.all(EdgeInsets.all(0)),
                        alignment: Alignment.center,
                        backgroundColor:
                            MaterialStateProperty.all(Colors.black12),
                        foregroundColor:
                            MaterialStateProperty.all(Colors.white),
                        shape: MaterialStateProperty.all(const CircleBorder())),
                    child: Icon(Icons.arrow_back),
                  ),
                ),
              ),
            )),
      ),
      body: SingleChildScrollView(
        controller: controller.scrollController,
        // padding: EdgeInsets.only(top: 0),
        child: Column(
          children: [
            Container(
              key: controller.gk1,
              height: ScreenAdapter.height(1800),
              width: ScreenAdapter.height(1080),
              color: Colors.orange,
              alignment: Alignment.center,
              child: Text(
                '商品',
                style: TextStyle(fontSize: ScreenAdapter.fontSize(100)),
              ),
            ),
            Container(
              key: controller.gk2,
              height: ScreenAdapter.height(2000),
              width: ScreenAdapter.height(1080),
              color: Colors.blue,
              alignment: Alignment.center,
              child: Text(
                '详情',
                style: TextStyle(fontSize: ScreenAdapter.fontSize(100)),
              ),
            ),
            Container(
              key: controller.gk3,
              height: ScreenAdapter.height(2900),
              width: ScreenAdapter.width(1080),
              color: Colors.orange,
              alignment: Alignment.center,
              child: Text(
                '推荐',
                style: TextStyle(fontSize: ScreenAdapter.fontSize(100)),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
